<template>
  <div class="app-container">
    <div class="header">
      <el-form :inline="true">
        <el-form-item label="设备编号" prop="sn">
          <el-input v-model="filter.sn" placeholder="请输入设备编号" style="width: 160px" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="filter.type" clearable placeholder="请输入类型" style="width: 160px">
            <el-option
              v-for="item in typeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间" prop="create_time">
          <el-date-picker
            style="width: 240px"
            v-model="filter.create_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :editable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
          <el-button @click="reset()">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="exportMonth"
            type="month"
            format="YYYY-MM"
            value-format="YYYY-MM"
            placeholder="选择导出的月份"
          />
          <el-button type="success" @click="onExport" icon="Promotion">导出操作日志</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <div class="table-inner">
        <el-table
          class="table"
          v-loading="loading"
          row-key="id"
          :data="list"
          style="width: 100%"
          border
        >
          <template #empty><el-empty description="暂无数据" /></template>
    
          <el-table-column prop="name" label="设备名称" align="center">
            <template #default="scope">
              <span v-if="scope.row.equipment && scope.row.equipment.name">{{
                scope.row.equipment.name
              }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column prop="sn" label="设备编码" align="center">
            <template #default="scope">
              <span v-if="scope.row.equipment && scope.row.equipment.sn">{{
                scope.row.equipment.sn
              }}</span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="equiIfy" label="人员信息" align="center">
            <template #default="scope">
              <div class="between" v-if="scope.row.personnel">
                <span>{{ scope.row.personnel.name }}</span>
                <span>{{ scope.row.personnel.mobile }}</span>
              </div>
              <span v-else>暂无</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="personnel" label="操作账号" align="center">
            <template #default="scope">
              <span v-if="scope.row.personnel && scope.row.personnel.name">
                {{ scope.row.personnel.name }}
              </span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="操作人员" align="center">
            <template #default="scope">
              <span v-if="scope.row.remark">
                {{ scope.row.remark }}
              </span>
              <span v-else>暂无</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="mobile" label="联系电话" align="center">
            <template #default="scope">
              <span v-if="scope.row.personnel && scope.row.personnel.mobile">
                {{ scope.row.personnel.mobile }}
              </span>
              <span v-else>暂无</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="type" label="操作类型" align="center" width="120">
            <template #default="scope">
              <span v-if="scope.row.type == 0">房间绑定</span>
              <span v-if="scope.row.type == 1">开启</span>
              <span v-if="scope.row.type == 2">关闭</span>
              <span v-if="scope.row.type == 3">查询</span>
              <span v-if="scope.row.type == 4">解绑</span>
              <span v-if="scope.row.type == 5">人员绑定</span>
              <span v-if="scope.row.type == 9">上线</span>
              <span v-if="scope.row.type == 10">离线</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="时间" align="center" />
          <el-table-column prop="actioninfo" label="信息" align="center" />
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="query.page"
          :page-size="query.limit"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- <EquiDialog ref="equiDialog" /> -->
  </div>
</template>

<script lang="ts" setup>
  import axios from 'axios'
  import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import { onMounted, reactive, ref } from 'vue'
  import { InfoLog, downloadLog, downloadLog2 } from '@/api/admin'
  import { useRouter, useRoute } from 'vue-router'
  const route = useRoute()
  const router = useRouter()
  const loading = ref(true)
  const list = ref()
  const total = ref(0)
  const exportMonth = ref()
  const query = reactive({
    page: 1,
    limit: 10,
    filter: '',
    op: { create_time: 'range', sn: '=', type: '=' },
  })
  const filter = reactive({
    create_time: '',
    sn: '',
    type: null,
  })
  const typeArr = [
    {
      label: '房间绑定',
      value: 0,
    },
    {
      label: '开启',
      value: 1,
    },
    {
      label: '关闭',
      value: 2,
    },
    {
      label: '查询',
      value: 3,
    },
    {
      label: '解绑',
      value: 4,
    },
    {
      label: '人员绑定',
      value: 5,
    },
    {
      label: '上线',
      value: 9,
    },
    {
      label: '离线',
      value: 10,
    },
  ]
  const getList = () => {
    if (route.query.sn) filter.sn = route.query.sn
    if (route.query.id) {
      query.filter = JSON.stringify({ info_id: route.query.id, sn: route.query.sn })
    }
    loading.value = true
    InfoLog(query).then((res) => {
      if (res.code == 200) {
        list.value = res.data.data
        total.value = res.data.count
      }
      loading.value = false
    })
  }
  const handleSizeChange = (val: number) => {
    query.page = 1
    query.limit = val
    getList()
  }
  const handleCurrentChange = (val: number) => {
    query.page = val
    getList()
  }
  const onSubmit = () => {
    let filt = { ...filter }
    if (filt.create_time) filt.create_time = filt.create_time.join(' - ')
    else filt.create_time = ''
    if (filt.type == 0) filt.type = '0'
    query.filter = JSON.stringify(filt)
    query.page = 1
    getList()
  }

  const onExport = () => {
    if (!exportMonth.value) {
      ElMessage({
        message: '请选择导出月份',
        type: 'error',
      })
      return false
    }
    if (route.query.id) {
      downloadLog({
        time: exportMonth.value,
        equipment_id: route.query.id,
        filename: exportMonth.value + '操作日志',
      })
    } else {
      if (!filter.sn) {
        ElMessage({
          message: '请输入设备编号并查询后导出',
          type: 'error',
        })
        return false
      }
      downloadLog2({
        time: exportMonth.value,
        sn: filter.sn,
        type: query.filter.type,
        filename: exportMonth.value + '操作日志',
      })
    }
  }

  const reset = () => {
    filter.create_time = ''
    filter.sn = ''
    filter.type = ''
    query.page = 1
    query.filter = JSON.stringify(filter)
    getList()
  }
  getList()
</script>

<style scoped lang="scss">
  @import './index';

  .between {
    display: flex;
    justify-content: space-between;
  }
</style>
